<template>
    <div>
        <el-row>
            <el-button type="primary" plain @click="toBaseLogForm">增加</el-button>
        </el-row>
        <el-table
        :data="baseLogData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
            <el-table-column
                prop="id"
                label="ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="realname"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="content"
                label="内容">
            </el-table-column>
            <el-table-column
                prop="method"
                label="方式">
            </el-table-column>
            <el-table-column
                prop="logTime"
                label="时间">
                <template slot-scope="scope">
                {{scope.row.logTime | fmtDate}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    class="butUpdate"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row)">更新</el-button>
                    <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {get,post,del} from '@/utils/request'
export default {
    data () {
        return {
            baseLogData:[]
        }
    },
    methods: {
        // 删除按钮事件
        handleDelete(index,row){
            // 调用删除接口
            let url="http://localhost:8888/baselog"
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    post(url,{id:row.id}).then(resp=>{
                    })
                    this.loadBaseLogeData();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });
        },
        // 更新按钮
        handleEdit(index,row){
            this.$router.push({
                path:"/zhou/baseLogForm",
                query:row
            })
        },
        // 增加按钮跳转功能
        toBaseLogForm(){
            this.$router.push({
                path:"/zhou/baseLogForm"
            })
        },
         // 属性来为 Table 中的某一行添加 class
        tableRowClassName({row, rowIndex}) {
            if (rowIndex%2 === 0) {
            return 'warning';
            } else if (rowIndex%2 === 1) {
            return 'success';
            }
            return '';
        },
        // 查询数据
        loadBaseLogeData(){
            // 定义一个url变量，存储查询数据接口地址
            let url="http://localhost:8888/baselog/query"
            // 调用接口获取数据存储到baseLogData
            get(url).then(resp=>{
                console.log(resp.data);
                this.baseLogData=resp.data
            })
        }
    },
    created () {
        this.loadBaseLogeData();
    }
}
</script>

<style lang="scss">
.butUpdate{
    background: #2dc888;
    color: #fff;
}
.el-table .success{
    background: #d0f5f1 !important;
}
.el-table .warning{
    background: #d2eef3 !important;
  }
</style>
